<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 18:56:14
-->
 <template>
  <!--1. 容器 -->
  <div  ref="bottom1_container" style="height:95%"></div>
</template>
<script>
import { Column } from '@antv/g2plot';

export default ({
  mounted(){
      this.initChart()
  },
  methods:{
    initChart(){
        const data = [
   {
    type: '健康码正常',
    sales: 34,
  },
  {
    type: '健康码异常',
    sales: 0,
  },
 
  
 
];

const columnPlot = new Column(this.$refs.bottom1_container, {
  data,
  xField: 'type',
  yField: 'sales',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      rotate: 0,
      offset: 10,
    },
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '人数',
    },
  },
});

columnPlot.render();
    }
  }
})
</script>